<script setup lang="ts">
import WarningCard from './components/WarningCard.vue'
import WarningRank from './components/WarningRank.vue'
import WarningTable from './components/WarningTable.vue'
import WarningStatistics from './components/WarningStatistics.vue'
</script>

<template>
  <div class="warning-overview h-full w-full overflow-auto dark:p-3">
    <div class="min-h-full flex flex-col gap-3">
      <div class="h-450px flex gap-3">
        <div class="h-full max-w-60% flex flex-auto flex-shrink-1 flex-col gap-3">
          <WarningCard />
          <WarningTable class="flex-1 bg-white" />
        </div>
        <WarningRank class="alpha-block h-full flex-basis-40% bg-white" />
      </div>
      <WarningStatistics class="alpha-block min-h-300px flex-auto bg-white" />
    </div>
  </div>
</template>

<style>
.warning-overview {
  background: var(--el-bg-color-page);
}
</style>
